<script setup>
    import cesiumMap from '../components/cesiumMap.vue'
    import {ref} from 'vue'
    let initBool=ref(true)
    function clickAccess() {
        initBool.value=false
    }
</script>
<template>
    <div class="home" >
        <!-- 初始化页面 -->
		<div class="init" v-if="initBool">
			<div class="init-first">
				<button class="btn" @click="clickAccess">走进七彩小镇</button>
			</div>
		</div> 
        <cesiumMap style="z-index: 2"/>

        <router-view></router-view>


    </div>
</template>

<style lang="less" scoped>
    .home{
        .init{
            position: absolute;
	        top: 0;
	        left: 0;
	        z-index: 1000000;
	        width: 100%;
	        height: 100%;
	        background-color: rgba(0,0,0,0.6);
	        display: flex;
	        justify-content: center;
	        align-items: center;
            .init-first{
                width: 130px;
	            height: 36px;
	            border-radius: 18px;
                .btn{
                    width: 100%;
	                height: 100%;
	                padding: 0;
	                margin: 0;
	                background-color: transparent;
	                color: #fff;
	                border: 1.5px solid #fff;
	                border-radius: 18px;
	                cursor: pointer;
	                box-sizing: border-box;
                    &:hover{
                        border: none;
	                    background-color: #56FFFF;
	                    color: #000;
                    }
                }
            }
        }
    }
</style>